<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-collapse">
        <a
          class="mui-navigate-right"
          href="#"
        >面板1</a>
        <div class="mui-collapse-content">
          <p>面板1子内容</p>
        </div>
      </li>
      <li class="mui-table-view-cell mui-collapse mui-active">
        <a
          class="mui-navigate-right"
          href="#"
        >面板1</a>
        <div class="mui-collapse-content">
          <p>面板1子内容</p>
        </div>
      </li>
    </ul>
    <div class="area">
      <a href="#sheet1">打开弹框</a>
    </div>
    <div class="area">
      <span class="mui-badge">1</span>
      <span class="mui-badge mui-badge-primary">12</span>
      <span class="mui-badge mui-badge-success">123</span>
      <span class="mui-badge mui-badge-warning">3</span>
      <span class="mui-badge mui-badge-danger">45</span>
      <span class="mui-badge mui-badge-purple mui-badge-inverted">456</span>
    </div>
    <div class="area">
      <button
        type="button"
        data-loading-text="提交中"
        class="mui-btn mui-btn-primary loadingbtn"
      >确认</button>
    </div>

    <div class="area">
      <div class="mui-card">
        <div class="mui-card-header mui-card-media">
          <img src="../assets/logo.png" />
          <div class="mui-media-body">
            小M
            <p>发表于 2016-06-30 15:30</p>
          </div>
        </div>
        <div class="mui-card-content">内容区</div>
        <div class="mui-card-footer">页脚</div>
      </div>
    </div>

    <div class="area">
      <div class="mui-input-row mui-checkbox">
        <label>checkbox示例</label>
        <input
          name="checkbox1"
          value="Item 1"
          type="checkbox"
          checked
        >
      </div>
    </div>

    <div class="area">
      <button
        class="mui-btn mui-btn-primary"
        @click="alert()"
      >警告alert</button>
      <button class="mui-btn mui-btn-primary">确认confirm</button>
      <button class="mui-btn mui-btn-primary">输入prompt</button>
      <button class="mui-btn mui-btn-primary">toast</button>
    </div>
    <div
      id="sheet1"
      class="mui-popover mui-popover-bottom mui-popover-action "
    >
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <a href="#">菜单1</a>
        </li>
        <li class="mui-table-view-cell">
          <a href="#">菜单2</a>
        </li>
      </ul>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <a href="#sheet1"><b>取消</b></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mui",
  methods: {
    alert() {
      let mui = this.mui;
      mui.alert("欢饮使用", "同事", "确定", function() {
        mui.toast("操作成功了",{ duration:'300ms', type:'div' });
      });
    }
  },
  mounted() {
    let mui = this.mui;
    mui(document.body).on("tap", ".loadingbtn", function(e) {
      mui(this).button("loading");
      setTimeout(
        function() {
          mui(this).button("reset");
        }.bind(this),
        2000
      );
    });
  }
};
</script>

<style lang='scss'>
.area {
  margin: 10px;
}
</style>
